<template>
  <!-- <button @click="handleClick">test</button> -->
  <p>{{name}}</p>
</template>

<script>

import { ref } from 'vue'
export default {
  name: 'App',
  setup (props, context) {
    // 非响应式的数据
    /* 
    let name = 'liuxin'
    setTimeout(() => {
      name = 'hello'
    }, 1000);
    return {
      name
    }
    */

    // 响应式的数据
    // 通过proxy对数据进行封装, 当数据变化的时候触发模板的更新
    let name = ref('liuxin')
    setTimeout(() => {
      // 通过.value进行改变
      name.value = 'hello'
    }, 2000);

    return {
      name
    }
  }
}
</script>

<style>

</style>
